import React, { useState } from 'react';
import { Route, Switch, useHistory, useRouteMatch } from 'react-router-dom';
import { Layout, Menu, Typography } from 'antd';
import { useTranslation } from 'react-i18next';
import MapIcon from '@material-ui/icons/Map';
import ReceiptIcon from '@material-ui/icons/Receipt';
import AssessmentIcon from '@material-ui/icons/Assessment';
import AssignmentIndIcon from '@material-ui/icons/AssignmentInd';
import LocationCityIcon from '@material-ui/icons/LocationCity';
import './HomePage.css';
import HomePageToast from '../../fragments/HomePageToast';
import GopherProps from '../../objects/internal/GopherProps';
import BikeMapFragment from '../../fragments/BikeMapFragment';
import AppBar from '../../components/AppBar';
import OrderFragment from '../../fragments/OrderFragment';
import StaffFragment from '../../fragments/StaffFragment';
import AnalysisFragment from '../../fragments/AnalysisFragment';
import CityManagementFragment from '../../fragments/CityManagementFragment';

const { Header, Content, Sider } = Layout; // <-> It's called Drawer, dammit

export default function HomePage(props: GopherProps) {
	const { path } = useRouteMatch();
	const { t } = useTranslation();
	const history = useHistory();
	const [state, setState] = useState<{drawerOpened: boolean}>({drawerOpened: true});

	const onCollapse = () => {
		setState({
			drawerOpened: !state.drawerOpened
		});
	}

	return (
		<Layout>
			<Sider collapsible collapsed={!state.drawerOpened} onCollapse={onCollapse}>
				<Menu theme={'dark'} mode={'inline'}>
					<Menu.Item key={'map'} icon={<MapIcon />} onClick={() => {history.push(`${path}/map`)}}>
						{t('nav-map')}
					</Menu.Item>
					<Menu.Item key={'order'} icon={<ReceiptIcon />} onClick={() => {history.push(`${path}/order`)}}>
						{t('nav-order')}
					</Menu.Item>
					<Menu.Item key={'analysis'} icon={<AssessmentIcon />} onClick={() => {history.push(`${path}/analysis`)}}>
						{t('nav-analysis')}
					</Menu.Item>
					<Menu.Item key={'staff'} icon={<AssignmentIndIcon />} onClick={() => {history.push(`${path}/staff`)}}>
						{t('nav-user-management')}
					</Menu.Item>
					<Menu.Item key={'city'} icon={<LocationCityIcon />} onClick={() => {history.push(`${path}/city`)}}>
						{t('nav-city-management')}
					</Menu.Item>
				</Menu>
			</Sider>
			<Layout>
				<Header className={'appbar'}>
					<AppBar username={props.gopher.getCurrentUsername()} onLogoutButtonClicked={() => {}} />
				</Header>
				<Content>
					<Switch>
						<Route exact path={path}>
							<HomePageToast gopher={props.gopher} />
						</Route>
						<Route exact path={`${path}/map`}>
							<BikeMapFragment gopher={props.gopher} />
						</Route>
						<Route exact path={`${path}/analysis`}>
							<AnalysisFragment gopher={props.gopher} />
						</Route>
						<Route exact path={`${path}/city`}>
							<CityManagementFragment gopher={props.gopher} />
						</Route>
						<Route exact path={`${path}/order/:id?`}>
							<OrderFragment gopher={props.gopher} />
						</Route>
						<Route exact path={`${path}/staff/:id?`}>
							<StaffFragment gopher={props.gopher} />
						</Route>
						<Route path={`${path}/*`}>
							<Typography>Page not found</Typography>
						</Route>
					</Switch>
				</Content>
			</Layout>
		</Layout>
	);
}
